<template>
    <div class="clock" :style="{width: width,height: height,background: config.background,color: config.color}">
        <div>
            <span id="sid">
            {{ value }} <span style="font-size: 25px">{{ unit }}</span>
        </span>
        </div>
        <div>{{ title }}</div>
    </div>
</template>

<script>

/**
 * 默认
 */
export default {
    props: {
        value: {
            type: String,
            default: '123.456'
        },
        title: {
            type: String,
            default: '标题'
        },
        unit: {
            type: String,
            default: '单位'
        },
        min: {
            type: String,
            default: '0'
        },
        max: {
            type: String,
            default: '100'
        },
        width: {
            type: String,
            default: '280px'
        },
        height: {
            type: String,
            default: '280px'
        },
        // 背景颜色
        background: {
            type: String,
            default: '#B0E0E6'
        },
        // 字体颜色
        color: {
            type: String,
            default: '#292421'
        },
        params: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            config: {
                background: this.background,
                color: this.color
            }
        }
    },
    watch: {
        background(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.config.background = newVal
            }
        },
        color(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.config.color = newVal
            }
        }
    },
    mounted() {
        if (this.params != null && this.params !== '') {
            let obj = JSON.parse(this.params)
            let color = obj['color']
            if (color !== undefined) {
                this.config.color = color
            }
            let background = obj['background']
            if (background !== undefined) {
                this.config.background = background
            }
        }
    }
}
</script>

<style>
.clock {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: bold;
    border-radius: 20px;
    text-align: center;
    font-size: 50px;
    /*margin: 20px auto;*/
    margin: 0 20px;
}
</style>
